<template>
  <a-drawer destroy-on-close placement="right" :open="props.visible" @close="oncancel" width="25%" @afterOpenChange="queryData">
    <a-spin :spinning="data.spinning">
      <a-tabs v-model:activeKey="data.activeKey" style="width: 100%">
        <a-tab-pane key="A" tab="最新">
          <a-row v-if="data.form" justify="center">
            <h1 v-if="data.form.approvType === 'A'">审核</h1>
            <h1 v-if="data.form.approvType === 'B'">取消审核</h1>
            <h1 v-if="data.form.approvType === 'C'">打印审核</h1>
            <h1 v-if="data.form.approvType === 'D'">回收审核</h1>
          </a-row>
          <a-row v-if="data.form" justify="center">
            <a-result v-if="data.form.docStatus === 'X'" status="error" title="审批已拒绝！"></a-result>
            <a-result v-if="data.form.docStatus === 'C'" status="success" title="审批已通过！"></a-result>
            <a-result v-if="data.form.docStatus === 'O'" status="info" title="审批进行中！"></a-result>
          </a-row>

          <a-row v-if="data.form">
            <a-timeline style="width: 100%">
              <a-timeline-item v-for="item in data.form.lista">
                <template #dot>
                  <CheckOutlined v-if="item.lineStatus === 'C'" style="font-size: 20px; color: green" />
                  <LoadingOutlined v-if="item.lineStatus === 'L'" style="font-size: 20px" />
                  <EllipsisOutlined v-if="item.lineStatus === 'O'" style="font-size: 20px" />
                  <CloseOutlined v-if="item.lineStatus === 'X'" style="font-size: 20px; color: red" />
                </template>
                <a-row justify="space-between">
                  <a-col :span="12">
                    <h3>{{ item.phaseName }}</h3>
                  </a-col>
                </a-row>
                <a-row justify="space-between">
                  <h3>{{ item.beginDate }}</h3>
                  <h3>{{ item.userName }}</h3>
                </a-row>
                <a-row>
                  <p>{{ item.freeTxt }}</p>
                </a-row>
                <a-row style="margin-bottom: 10px">
                  <a-button-group v-if="data.form.docStatus !== 'C'" status="warning">
                    <a-button
                      :disabled="!(item.userId === userStore.$state.employeeId)"
                      v-if="data.form.approvLineNum === item.lineNum && item.lineStatus !== 'X'"
                      @click="handleOk(item, 'A')"
                      type="primary"
                      >通过
                    </a-button>
                    <a-button
                      :disabled="!(item.userId === userStore.$state.employeeId)"
                      v-if="data.form.approvLineNum === item.lineNum && item.lineStatus !== 'X'"
                      @click="handleOk(item, 'B')"
                      danger
                      type="primary"
                      >拒绝
                    </a-button>
                    <a-popconfirm title="确认撤消当前审批吗?" ok-text="确认" cancel-text="取消" @confirm="onClose">
                      <a-button v-if="data.form.approvLineNum === item.lineNum">撤销</a-button>
                    </a-popconfirm>
                  </a-button-group>
                </a-row>
                <a-row>
                  <a-textarea
                    v-if="data.form.approvLineNum === item.lineNum && item.lineStatus !== 'X' && data.form.docStatus !== 'C'"
                    v-model:value="data.form.freeTxt"
                  ></a-textarea>
                </a-row>
              </a-timeline-item>
            </a-timeline>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="B" tab="历史">
          <a-table
            row-key="docEntry"
            :header-height="30"
            :columns="columns"
            :data-source="data.odlList"
            :scroll="{ x: 600 }"
            :pagination="{
              showSizeChanger: true,
              showQuickJumper: true,
              defaultPageSize: 20,
              pageSizeOptions: ['20', '50', '100', '200'],
            }"
          >
            <template #bodyCell="{ text, record, column, index }">
              <template v-if="column.dataIndex === 'approved'">
                <span> {{ text ? '已审核' : '未审核' }}</span>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-drawer>
</template>
<script setup>
  import { reactive, ref, onMounted } from 'vue';
  import { approvordApi } from '/@/api/business/erp/approvord-api.js';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '/@/store/modules/system/user';
  import { columns } from '/@/components/business/erp/approved/data.js';

  const userStore = useUserStore();
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    onClose: {
      type: Function,
    },
    approvedData: {
      tabName: {
        type: Number,
        default: 0,
      },
      baseEntry: {
        type: Number,
        default: 0,
      },
      approvType: {
        type: String,
      },
      type: Object,
    },
  });

  const router = useRouter();
  const queryFormState = {
    pageNum: 1,
    pageSize: 10,
    tabName: null,
    baseEntry: null,
  };
  const data = reactive({
    selectDocEntrys: [],
    list: [],
    tableList: [{}],
    odlList: [],
    form: { approvType: 'A', freeTxt: '' },
    loading: false,
    open: false,
    spinning: true,
    activeKey: 'A',
  });
  // 查询表单form
  const queryForm = reactive({ ...queryFormState });
  // 表格加载loading
  const tableLoading = ref(false);
  // 表格数据
  const tableData = ref(false);
  // 总数
  const total = ref(0);

  function oncancel() {
    props.onClose();
  }

  // 查询数据
  function queryData() {
    queryForm.baseEntry = props.approvedData.baseEntry;
    queryForm.tabName = props.approvedData.tabName;
    approvordApi
      .info(queryForm)
      .then((res) => {
        data.form = res.data[0];
        data.odlList = res.data;
      })
      .then((err) => {})
      .finally(() => {
        tableLoading.value = false;
        data.spinning = false;
      });
  }

  function onClose() {
    approvordApi.delete(data.form.docEntry).then((res) => {
      queryData();
    });
  }

  function handleOk(item, type) {
    item.freeTxt = data.form.freeTxt;
    if (type === 'A') {
      approvordApi.update(data.form).then((res) => {
        queryData();
        data.open = false;
      });
    } else {
      data.form.docStatus = 'X';
      approvordApi.update(data.form).then((res) => {
        queryData();
        data.open = false;
      });
    }
  }

  onMounted(() => {
    queryData();
  });
</script>
